<template>
    <div class="container">
        <div class="lyecs-table-list-warp">
            <div class="list-table-tool lyecs-search-warp">
                <el-form :model="filterParams">
                    <div class="advanced-search-warp list-table-tool-row">
                        <div class="simple-form-warp">
                            <div class="simple-form-field">
                                <slot></slot>
                            </div>
                            <div class="simple-form-field">
                                <div class="form-group">
                                    <label class="control-label"><span>活动状态：</span></label>
                                    <div class="control-container">
                                        <el-select v-model="filterParams.is_going" clearable>
                                            <el-option v-for="(item, key) in promotion_status" :value="key" :label="item" />
                                        </el-select>
                                    </div>
                                </div>
                            </div>
                            <div class="simple-form-field">
                                <div class="form-group">
                                    <label class="control-label"><span>活动名称：</span></label>
                                    <div class="control-container">
                                        <el-input v-model="filterParams.keyword" name="keyword" placeholder="输入活动名称">
                                            <template #append>
                                                <el-button @click="onSearchSubmit"><span class="iconfont icon-chakan1"></span></el-button>
                                            </template>
                                        </el-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="table-container">
                <a-spin :spinning="loading">
                    <el-table :data="filterState" row-key="promotion_id" @selection-change="onSelectChange" :total="total"
                        @sort-change="onSortChange" :loading="loading">
                        <el-table-column type="selection" width="32" />
                        <el-table-column label="活动名称" prop="promotion_name" :width="150">
                            <template #default="{ row }">
                                <div style="position: relative;">
                                    <div>{{ row.promotion_name || '--' }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="活动类型" prop="promotion_type_name" width="100">
                        </el-table-column>
                        <el-table-column label="起始日期" prop="start_time" width="150" sortable="custom">
                        </el-table-column>
                        <el-table-column label="截止日期" prop="end_time" width="150" sortable="custom">
                        </el-table-column>
                        <el-table-column label="排序" prop="sort_order" sortable="custom">
                            <template #default="{ row }">
                                <PopForm label="排序" type="input" :requestApi="updateProductActivityFiled" v-model:org-value="row.sort_order"
                                    :params="{ id: row.promotion_id, field: 'sort_order' }" extra="默认值为50，数值越小，排序越靠前">
                                    <div>{{ row.sort_order }}</div>
                                </PopForm>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="product_status"></el-table-column>
                        <el-table-column label="是否启用" prop="is_available" sortable="custom">
                                <template #default="{ row }">
                                    <Switch v-model:checked="row.is_available" :requestApi="updateProductActivityFiled"
                                        :params="{ id: row.promotion_id, field: 'is_available' }" />
                                </template>
                            </el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template #default="{ row }">
                                <DialogForm isDrawer @okCallback="loadFilter" title="编辑优惠活动" width="800px"
                                    path="promotion/productActivity/Info" :params="{ act: 'detail', id: row.promotion_id, promotion_type: row.promotion_type }">
                                    <a class="btn-link">编辑</a>
                                </DialogForm>
                                <el-divider direction="vertical" />
                                <DeleteRecord @afterDelete="loadFilter" :requestApi="delProductActivity"
                                    :params="{ id: row.promotion_id }">删除</DeleteRecord>
                            </template>
                        </el-table-column>
                        <template #empty>
                            <div class="empty-warp">
                                <div v-if="!loading" class="empty-bg">暂无数据</div>
                            </div>
                        </template>
                    </el-table>
                </a-spin>
                <div class="pagination-con" v-if="total > 0">
                    <Pagination v-model:page="filterParams.page" v-model:size="filterParams.size" :total="total"
                        @callback="loadFilter" />
                </div>
            </div>
            <div class="selected-action-warp" v-if="selectedIds.length > 0">
                <div class="selected-action">
                    <el-space>
                        <span>已选择：<b>{{ selectedIds.length }}</b> 项</span>
                        <el-popconfirm title="您确认要批量删除所选数据吗？" @confirm="onBatchSubmit('del')">
                            <template #reference><el-button>批量删除</el-button></template>
                        </el-popconfirm>
                    </el-space>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import '@/style/css/list.less'
import { DialogForm } from '@/components/dialog'
import { PopForm } from '@/components/pop-form'
import { ref, reactive, onMounted } from 'vue';
import { DeleteRecord, Switch, Pagination } from '@/components/list';
import { message } from 'ant-design-vue'
import { useConfigStore } from "@/store/config";
import { ProductActivityFilterState, ProductActivityFilterParams } from '@/types/promotion/productActivity.d';
import { getProductActivityList, batchSubmit, updateProductActivityFiled, delProductActivity, getProductActivityConfig } from "@/api/promotion/productActivity";
const config:any = useConfigStore();
const props = defineProps({
    promotion_type: {
        type: Number,
        default: 1,
    }
});
// 基本参数定义
const filterState = ref<ProductActivityFilterState[]>();
const loading = ref<boolean>(true);
const total = ref<number>(0);
const selectedIds = ref<number[]>([]);
const filterParams = reactive<ProductActivityFilterParams>({
    page: 1,
    size: config.get('page_size'),
    sort_field: '',
    sort_order: '',
    keyword: '',
    promotion_type: props.promotion_type == 3 ? [3] : [1,2],
});
const promotion_status = ref<string[]>([])
// 获取列表的查询结果
const loadFilter = async () => {
    loading.value = true;
    try {
        const result = await getProductActivityList({ ...filterParams });
        filterState.value = result.filter_result;
        total.value = result.total;
        const config = await getProductActivityConfig()
        promotion_status.value = config.promotion_status
        console.log(promotion_status.value)
    } catch (error: any) {
        message.error(error.message);
    } finally {
        loading.value = false;
    }
}
onMounted(() => {
    loadFilter();
});

// 参数查询
const onSearchSubmit = () => {
    loadFilter()
};
// 修改排序
const onSortChange = ({ prop, order }: { prop: string; order?: string }) => {
    filterParams.sort_field = prop;
    filterParams.sort_order = order == 'ascending' ? 'asc' : order == 'descending' ? 'desc' : '';
    loadFilter();
};

// 批量操作
const onBatchSubmit = async (action: string) => {
    try {
        const result = await batchSubmit(action, { ids: selectedIds.value });
        message.success(result.message);
        loadFilter();
    } catch (error: any) {
        message.error(error.message);
    }
};
// 多选操作
const onSelectChange = (e: ProductActivityFilterState[]) => {
    selectedIds.value = e.map((item:any) => item.promotion_id);
};
defineExpose({
	loadFilter
})
</script>
<style>
</style>